<template>
  <div class="hd">
    <div class="wrapper">
      <div class="op-l">
        <el-button type="primary" plain class="btn" @click="goBack">返回</el-button>
      </div>
      <div class="tit">
        <h2>
          <span>{{ title }}</span>
          <span class="type-name">{{ questionTypeName }}</span>
        </h2>
      </div>
      <div class="op-r">
        <el-button type="primary" plain class="btn" @click="handleSave" v-if="onSave">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Options, Vue } from 'vue-class-component';

@Options({
  props: {
    title: String,
    questionTypeName: String,
    onSave: Function,
  },
})
export default class QuestionDetailHead extends Vue {
  $router: any;
  onSave!: () => {};
  goBack() {
    this.$router.push('/questionbank');
  }
  handleSave() {
    if (this.onSave) {
      this.onSave();
    }
  }
}
</script>

<style scoped lang="scss">
.hd {
  position: relative;
  height: 88px;
  padding: 0;
  box-shadow: 0 5px 10px 0 rgba(27, 27, 98, 0.1);
  background: #fff;
  z-index: 1;
  .wrapper {
    position: relative;
  }
}
.op-l,
.op-r {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  text-align: center;
}
.btn {
  width: 77px;
  height: 34px;
  min-height: auto;
  padding: 0;
  font-size: 14px;
  border: none;
}
.op-l {
  left: 0;
  text-align: left;
  .btn {
    margin-right: 22px;
  }
}
.op-r {
  right: 0;
  text-align: right;
  .btn {
    margin-left: 22px;
  }
}
.tit {
  padding: 0 220px;
  h2 {
    height: 100%;
    line-height: 88px;
    @include ellipse();
    text-align: center;
  }
  span {
    font-size: 20px;
    color: $text-black;
    &.type-name {
      margin-left: 100px;
    }
  }
}
</style>
